<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul{margin: 0;padding: 0; list-style: none;}
		img{border:none; vertical-align: top;}
		div{width:1260px; height:180px;padding:10px 0 10px 10px;position: relative;left: 50px; top: 150px;border:1px solid #000;overflow: hidden;}    
		#ul1{height:180px;position: absolute;}
		#ul1 li{width:200px;height: 180px; padding: 0 10px 10px 0;float: left;}
		#ul1 img{width: 200px; height: 180px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oUl = document.getElementById('ul1');
		var aLi = document.getElementsByTagName('li');
		var aBtn = document.getElementsByTagName('input');
		var timer = null;
		var iSpeed = 0;
		var bStop = true;
		/*	只在头尾添加一个li是不行的，因为如果这个走完后再把整个ul拉回后面，很明显这个的前面就都全空了
		var oLi = document.createElement('li');
		var oImg = document.createElement('img');

	 	oImg.src = '1-1.jpg';
		oImg.alt ='';
		oLi.appendChild(oImg);
		oUl.appendChild(oLi);
		oUl.style.width = (aLi.length)*aLi[0].offsetWidth + 'px';			//如果li用的是margin。offsetWidth是不包括margin的，所以改用padding
		*/
		oUl.innerHTML +=oUl.innerHTML;
		oUl.style.width = aLi.length*aLi[0].offsetWidth + 'px';		//2520px=210px*12

		timer = setInterval(fnMove,30);

		oUl.onmouseover = function (){
			clearInterval(timer);
		}

		oUl.onmouseout = function (){
			if (bStop) {
				timer = setInterval(fnMove,30);
			};
		}

		aBtn[0].onclick = function (){
			iSpeed = -10;
		}

		aBtn[1].onclick = function (){
			iSpeed = 10;
		}

		aBtn[2].onclick = function (){
			if (bStop) {
				clearInterval(timer);
				this.value = '开始';
				bStop = false;
			}else{
				timer = setInterval(fnMove,30);
				this.value = '停止';
				bStop = true;
			}
		}
		function fnMove(){
			if (oUl.offsetLeft < -oUl.offsetWidth/2) {
				oUl.style.left = 0;
			}else if(oUl.offsetLeft > 0){
				oUl.style.left = -oUl.offsetWidth/2 + 'px';
			}
			
			oUl.style.left = oUl.offsetLeft +iSpeed + 'px';
		}
	}
	</script>
</head>
<body>
	<input type="button" value="向左滚动" />
	<input type="button" value="向右滚动" />
	<input type="button" value="停止" />
	<div>
		<ul id="ul1">
			<li><img src="1-1.jpg" alt=""></li>
			<li><img src="1-2.jpg" alt=""></li>
			<li><img src="1-3.jpg" alt=""></li>
			<li><img src="2-1.jpg" alt=""></li>
			<li><img src="2-2.jpg" alt=""></li>
			<li><img src="2-3.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>